<template>
	<form @submit="onformSumit">
		<view class="forgetpwd">
      <image class="forgetpwd-bg" src="../../static/img/loginbg.png" />
      <view class="forgetpwd-inner">
        <image class="forgetpwd-logo" src="../../static/img/logo.png">
        <view class="input-row">
          <input placeholder-class="text-white" name="phoneNum" placeholder="请输入手机号" @input="onEnterPhone" />
        </view>
        <view class="input-row">
          <input placeholder-class="text-white" name="userVerificationCode" placeholder="请输入验证码" />
          <button class="cu-btn round primary ag-ml20" @click="onPhoneVerificationCode" v-if="showSMSCodeButton">{{showVerificationCode}}</button>
          <uni-countdown :show-colon="true" :show-day="false" :second="30" v-if="showCountdown" @timeup="onSmsTimeup"></uni-countdown>
        </view>
        <button class="cu-btn primary block ag-mt60 round" form-type="submit">重置</button>
        <button @click="onCancel" class="cu-btn primary cancel block ag-mt20 round">取消</button>
        <view class="ag-spacer20"></view>
      </view>
		</view>
	</form>
</template>
<script>
	import uniCountdown from '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue'
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				showCountdown: false,
				showSMSCodeButton: true,
				userPhone: '',
				userVerificationCode: '',
				sendVerificationCode: '',
				showVerificationCode: '获取验证码',
			}
		},
		methods: {
			onSmsTimeup() {
				this.showCountdown = false;
				this.showSMSCodeButton = !this.showCountdown;
			},
			onCancel() {
				uni.navigateBack();
			},
			onEnterPhone(e) {
				this.userPhone = e.detail.value;
				console.log(this.userPhone);
			},
			async onformSumit(e) {
				var data = e.detail.value;
				console.log(data);
				if (data.phone != '') {
					var result = await this.resetPwdService.resetPwdAsync(data.phoneNum, data.userVerificationCode);
					console.log(result);
					if (result) {
						let retBool = result.RetBool
						if (retBool == true) {
							uni.showToast({
								title: "修改成功，请重新登录!",
							});
							uni.navigateBack();
						} else {
							uni.showToast({
								title: "修改失败!" + result.RetMsg,
								icon: "none"
							});
						}
					} else {
						uni.showToast({
							title: "修改失败!",
							icon: "none"
						});
					}
				}
			},
			async onPhoneVerificationCode() {
				this.showCountdown = true;
				this.showSMSCodeButton = !this.showCountdown;
				if (this.userPhone != '') {
					if (!this.resetPwdService.checkPhone(this.userPhone)) {
						uni.showToast({
							title: "手机格式错误，请重新输入",
							icon: "none"
						})
						return;
					}
					var result = await this.resetPwdService.phoneVerificationCodeAsync(this.userPhone);
					console.log(result);
					if (result) {
						let retBool = result.RetBool
						if (retBool == true) {
							uni.showToast({
								title: "验证码发送成功!",
								icon: "none"
							});
							this.showCountdown = true;
							this.showSMSCodeButton = !this.showCountdown;
						} else {
							uni.showToast({
								title: "验证码发送失败!" + result.RetMsg,
								icon: "none"
							});
						}
					} else {
						uni.showToast({
							title: "验证码发送失败!",
							icon: "none"
						});
					}
				}
			},
		}
	}
</script>
<style lang="scss">
	.forgetpwd {

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    &-bg{
      left: 0;
      top: 0;
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    &-inner{
      position: absolute;
      padding: 0 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 238rpx;
      box-sizing: border-box;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

		&-logo {
      width: 426rpx;
      height: 112rpx;
			margin-bottom: 100rpx;
    }
    .cu-btn{
      height: 80rpx;
      &.block{
        width: 100%;
      }
      &.cancel{
        background-color: #184e88;
        border-color: #184e88;
      }
    }
    
		.input-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: white;
			width: 100%;
			margin-top: 40rpx;
			position: relative;

			&__tip {
				font-size: 24rpx;
				position: absolute;
				bottom: -35rpx;
				white-space: nowrap;
				transform: scale(.8);
				transform-origin: left;
				left: 150rpx;
      }
      


			&__label {
				width: 110rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-right: 40rpx;
				font-size: 28rpx;
			}

			input {
				height: 80rpx;
				border: 1px solid white;
				font-size: 30rpx;
        flex: 1;
        color: #ffffff;
        border-radius: 40rpx;
        text-align: center;
			}
		}
	}
</style>
